<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第五大道商品列表页</title>
    <link rel="stylesheet" href="css/liebiao.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="banner">
        <a href="">
            <img src="img/0.jpg" alt="">
        </a>
    </div>
    <div id="nav-wrap">
        <div id="nav">
            <img class="img1" src="img/home.png" alt="">
            <a href="shouye.html">第五大道首页</a>
            <img class="img2" src="img/phone.png" alt="">
            <p>贵宾专线：4008-6767-38</p>
            <ul>
                <li class="li1"><a href="denglu.html">登录</a></li>
                <li> <img src="img/youli.gif" alt=""><a href="zhuce.html">注册</a></li>
                <li><a href="">我的第五大道</a></li>
                <li><a href="">帮助中心</a></li>
                <li><a href="">手机版下载</a></li>
            </ul>
        </div>
    </div>
    <div id="search-wrap">
        <div id="search">
           <a href="shouye.html"> <img class="img1" src="img/wudadaologo.jpg" alt=""></a>
            <img class="img2" src="img/yijian.jpg" alt="">
            <div id="search-mid">
                <div id="search-mid-top">
                    <input class="search-btn1" type="text" placeholder="太阳镜">
                    <input class="search-btn2" type="button" value="搜&nbsp;索">
                </div>
                <ul>
                    <li class="li1">连衣裙</li>
                    <li>美妆</li>
                    <li>运动户外</li>
                    <li>箱包</li>
                    <li>配饰</li>
                    <li>腕表</li>
                </ul>
            </div>
            <div id="search-right">
                <img class="img3" src="img/hua.png" alt="">
                <p>第五大道海外生活</p>
            </div>
        </div>
    </div>
    <div id="meun-wrap">
        <div id="meun">
            <div class="li1"><a href="liebiao.html">商品分类</a></div>
            <ul>
                <li><a href="">品牌</a></li>
                <li><a href="">最新</a></li>
                <li><a href="">女士</a></li>
                <li><a href="">男士</a></li>
                <li><a href="">生活馆</a></li>
                <li><a href="">海外馆</a></li>
                <li><a href="">时尚</a></li>
                <li><a href="">特惠</a></li>
                <li><a href="">礼品区</a></li>
                <li class="li2"><a href=""><img src="img/logo0.png" alt=""><span>到店</span></a></li>
                <li class="li3"><a href=""><img src="img/overseaslogo.gif" alt=""></a></li>
                <li class="li4"><a href=""><img src="img/logo1.png" alt=""></a></li>
                <li class="li5"><a href=""><img src="img/logo2.png" alt=""></a></li>
                <li class="li6"><a href=""><img src="img/logo3.png" alt=""></a></li>
            </ul>
        </div>
    </div>
    <div id="order-wrap">
       <div id="order">
        <ul class="list">
            <!-- <li>
                <img src="" alt="">
                <p></p>
                <p></p>
                <p></p>
            </li> -->
        </ul>
       </div>
    </div>
    <script>
         // 请求商品列表
         function loadData() {
            let pagenum = 0;
            let pagesize = 20;
            let url = 'http://jx.xuzhixiang.top/ap/api/allproductlist.php'
            let uid = localStorage.getItem('uid')
            let token = localStorage.getItem('token')


            axios.get(url, {
                params: {
                    pagenum,
                    pagesize,
                    uid
                }
            }).then(res => {
                console.log(res.data.data);
                // 商品数组
                let arr = res.data.data;

                let html = '';

                arr.forEach(obj => {
                    html += ` <li>
                        <a href="xiangqing.html?id=${obj.pid}"><img src="${obj.pimg}" alt=""></a>
                            <a href="xiangqing.html?id=${obj.pid}"><p>${obj.pname}</p></a>
                            <a href="xiangqing.html?id=${obj.pid}"><p>${obj.pdesc}</p></a>
                            <p class="p1">￥${obj.pprice}</p>
                        </li>`
                })
                let list = document.querySelector('.list')
                list.innerHTML = html;
              
            })
        }
        loadData()
    </script>
     <div class="bottom">
        <ul>
            <li>
                <img src="img/9.jpg" alt="">
                <div>
                    <p class="P1">正品保障</p>
                    <p class="P2">品牌授权，官方验真</p>
                </div>
            </li>
            <li>
                <img src="img/10.jpg" alt="">
                <div>
                    <p class="P1">专柜发货</p>
                    <p class="P2">专柜直接或到店自提</p>
                </div>
            </li>
            <li>
                <img src="img/11.jpg" alt="">
                <div>
                    <p class="P1">无忧售后</p>
                    <p class="P2">7天无理由退换货</p>
                </div>
            </li>
            <li>
                <img src="img/12.jpg" alt="">
                <div>
                    <p class="P1">VIP服务</p>
                    <p class="P2">享品牌会员售前售后服务</p>
                </div>
            </li>
            <li>
                <img src="img/13.jpg" alt="">
                <div>
                    <p class="P1">权威荣誉</p>
                    <p class="P2">商务部授予诚信示范企业</p>
                </div>
            </li>
        </ul>
    </div>
    <div class="footer">
        <ul>
            <li class="li0">
                <span class="span1">服务保障</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
            </li>
            <li>
                <span class="span1">使用帮助</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
            </li>
            <li>
                <span class="span1">支付方式</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
                <span>分期付款</span>
            </li>
            <li>
                <span class="span1">配送方式</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
            </li>
            <li>
                <span class="span1">售后服务</span>
                <span>品牌授权正品</span>
                <span>品牌客服</span>
                <span>预约到店体验</span>
                <span>7天无理由退换</span>
            </li>
            <li class="li1">
                <span class="span1">第五大道APP</span>
                <img src="img/14.jpg" alt="">
            </li>
            <li class="li2">
                <span class="span1">第五大道微博</span>
                <img src="img/14.jpg" alt="">
            </li>
        </ul>
    </div>
    <div class="copy">
        <div class="copy-1">
            <ul>
                <li><a href="">箱包</a></li>
                <li><a href="">美妆</a></li>
                <li><a href="">服饰</a></li>
                <li><a href="">腕表</a></li>
                <li><a href="">配饰</a></li>
                <li><a href="">鞋靴</a></li>
                <li><a href="">特惠</a></li>
                <li class="LI"><a href="">礼品区</a></li>
            </ul>
        </div>
        <div class="copy-2">
            <ul>
                <li>关于第五大道</li>
                <li>网站地图</li>
                <li>品牌合作专区</li>
                <li>媒体聚焦</li>
                <li>商务合作</li>
                <li>商家合作</li>
                <li>加入第五大道</li>
                <li>友情链接</li>
                <li>奢尚志</li>
                <li>联系我们</li>
                <li>投诉建议</li>
            </ul>
        </div>
        <div class="copy-3">
            <p>Copyright © 2008-2014 瑞美嘉信国际信息技术（北京）有限公司 版权所有京ICP备09012701号 京公网安备 11010102003747号 丨营业执照</p>
        </div>
    </div>
    <div id="up">
        <div id="bigbox1">
            <img src="img/foot.png" alt="">
            <div id="bigbox"></div>
        </div>
    </div>
    <script>
        var a = document.querySelector("#bigbox");
        var b = document.querySelector("#up");
        a.onclick = function () {
            b.style.display = "none";
        }
    </script>
    <div class="right">
        <ul>
            <li><a href="gouwuche.html"><img src="img/gouwu.png" alt=""></a></li>
            <li><img src="img/ka.png" alt=""></li>
            <li><img src="img/xin.png" alt=""></li>
            <li><img src="img/kefu.png" alt=""></li>
            <li class="li4"><img src="img/weixin.png" alt=""></li>
            <li><img src="img/bi.png" alt=""></li>
            <li><img src="img/dianhua.png" alt=""></li>
            <li id="puttop"><img src="img/top.png" alt=""></li>
        </ul>
    </div>
    <script>
        var puttop=document.querySelector("#puttop");
        puttop.onclick=function(){
            document.documentElement.scrollTop=document.body.scrollTop=0;
        }
    </script>
</body>
</html>